<template>
  <div>
    <i-page-header class="product_tabs" title="日志查看"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="table_box">
        <Form ref="formValidate" class="tabform">
          <Row :gutter="24" type="flex" justify="end">
            <Col span="24" class="ivu-text-left">
              <FormItem :label="fromList.title+'：'">
                <RadioGroup type="button" v-model="formValidate.data" class="mr15"
                            @on-change="selectChange(formValidate.data)">
                  <Radio :label="itemn.val" v-for="(itemn,indexn) in fromList.fromTxt" :key="indexn">
                    {{itemn.text}}
                  </Radio>
                </RadioGroup>
                <DatePicker @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
                            type="daterange" placement="bottom-end" placeholder="自定义时间"
                            style="width: 200px;"></DatePicker>
                <el-button v-if="$utils.checkPermissions(paths,'log/delMonth')" type="primary" @click="tapDel3" style=" margin-left: 10px;" icon="el-icon-search">删除1个月之前</el-button>
              </FormItem>
            </Col>
          </Row>
            <el-row :space="24">

              <el-col :span="6">
                <FormItem label="管理员：">
                  <Input  placeholder="请输管理员" v-model="formValidate.username" style="width: 70%;" clearable></Input>
                </FormItem>
              </el-col>

              <el-col :span="6">
                <FormItem label="行为：">
                  <Input  placeholder="请输入行为" v-model="formValidate.action" style="width: 70%;" clearable></Input>
                </FormItem>
              </el-col>

              <el-col :span="6" class="subscribe_box">
                <FormItem label="IP：">
                  <Input  placeholder="请输入IP" v-model="formValidate.ip" style="width: 70%;" clearable></Input>
                </FormItem>
              </el-col>

              <el-col :span="6" class="btn_box">
                <!--<FormItem>-->
                <Button type="primary" icon="ios-search" label="default" class="userSearch"  @click="tapSeach">搜索</Button>
                <!--</FormItem>-->
              </el-col>
            </el-row>
        </Form>
      </div>


      <Table :columns="columns" :data="tableData" class="mt25"
             ref="table" highlight-row
             :loading="loading"
             no-userFrom-text="暂无数据"
             no-filtered-userFrom-text="暂无筛选结果"
      >

        <template slot-scope="{ row,  }" slot="action">
          <div>{{ row.action }}</div>
        </template>

      </Table>

      <div class="acea-row row-right page">
        <Page :total="count" show-elevator show-total @on-change="tapPageChange"
              :page-size="pageSize"/>
      </div>

    </Card>

  </div>
</template>


<script>
    import {mapState,mapMutations} from 'vuex';
    import expandRow from './tableExpand.vue';
    import {SystemLogDelMonth, SystemLog} from "../../../../api/system/Log";
    import IPageHeader from "../../../../layouts/system/page-header/index";
    export default {
        name: "log_index",
        components: {IPageHeader,expandRow},
        computed: {
          ...mapState('system/user',['paths']),
        },
        data() {
            return {
                datatime:'',
                loading : true,
                pageSize:0,
                count:0,
                keyword:'',
                tableData:[],
                stype : '',
                timeVal: [],
                fromList: {
                    title: '选择时间',
                    custom: true,
                    fromTxt: [
                        { text: '全部', val: '' },
                        { text: '今天', val: 'today' },
                        { text: '昨天', val: 'yesterday' },
                        { text: '最近7天', val: 'lately7' },
                        { text: '最近30天', val: 'lately30' },
                        { text: '本月', val: 'month' },
                        { text: '本年', val: 'year' }
                    ]
                },
                formValidate: {
                    data: '',
                    action: '',
                    ip: '',
                    username: ''
                },
              columns: [
                {
                  type: 'expand',
                  width: 40,
                  render: (h, params) => {
                    return h(expandRow, {
                      props: {
                        row: params.row
                      }
                    })
                  }
                },
                {
                  title: 'ID',
                  key: 'id',
                  width: 80
                },
                {
                  title: '标题',
                  key: 'title',
                  align:'center'
                },
                {
                  title: '动作',
                  slot: 'action',
                  width: 140
                },
                {
                  title: '管理员',
                  key: 'admin_username',
                  width: 140
                },
                {
                  title: '操作IP',
                  key: 'ip',
                  width: 140
                },
                {
                  title: '具体信息',
                  key: 'ipara',
                  width: 140
                },
                {
                  title: '操作时间',
                  key: 'time',
                  width: 150
                }
              ],
            }
        },

        created() {
          this.initView();
        },
        methods: {
            initView:function(){
                this.getData();
            },
            /**
             * 分页
             * @param page
             */
            tapPageChange:function (page) {
                this.loading = true;
                this.page = page;
                this.getData();
            },
            /**
             * 搜索栏目
             */
            tapSeach:function(){
                this.page = 1;
                this.loading = true;
                this.getData();
            },
            // 选择时间
            selectChange (tab) {
                this.page = 1;
                this.loading = true;
                this.formValidate.data = tab;
                this.timeVal = [];
                this.getData();
            },
            // 具体日期
            onchangeTime (e) {
                this.timeVal = e;
                this.formValidate.data = this.timeVal.join('-');
                this.page = 1;
                this.loading = true;
                this.getData();
            },
            /**
             *
             * 清理三个月之前的
             */
            tapDel3:function(){
                this.$confirm('你确定要删除1个月之前的数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(()=> {
                        this.$utils.loading(this, "loading..");

                        SystemLogDelMonth()
                            .then(res=>{
                                this.$utils.loadingClose();
                                if (res.code == 0) {
                                    this.$message({
                                        message: '清理成功',
                                        type: 'success'
                                    });
                                    this.getData();
                                } else {
                                    this.$alert(res.msg);
                                }
                            })
                            .catch(err=>{
                                his.$utils.loadingClose();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    });
            },
            /**
             * 获取数据
             */
            getData:function () {
                var post = {};
                for(var i in this.formValidate) {
                    post[i] = this.formValidate[i];
                }
                post.page = this.page;
                SystemLog(post)
                    .then(res=>{
                        this.$utils.loadingClose();
                        this.loading = false;
                        if(res.code == 200) {
                            this.tableData = res.data.list;
                            this.pageSize = res.data.pageSize;
                            this.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.loading = false;
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            }
        }
    }
</script>
<style scoped>

</style>
